<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://unpkg.com/vue"></script>
<script type="text/x-template" id="mycomp">
<span>
    <div>总共{{total}}个事项，{{done}}个已完成，{{total-done}}个未完成。</div>
</span>
</script>
<script>
    window.onload=function() {

        Vue.component('todowzq', {
            props: ['total','done'],
            template: '<span>总共{{total}}个项目,{{done}}个已完成,{{total-done}}个未完成</span>',
        })
        var app4 = new Vue({
            el: '#app-4',

            methods: {
                addproject: function () {
                    this.todos.push({test:this.project,done:false});
                },
                switchdel:function(index){
                    this.todos[index].done=!this.todos[index].done;
                },
            },
            data: {
                project:null,
                todos: [
                    {test: '爸爸郭仪杰',done:false},
                    {test: '大儿子王忠强',done:true},
                    {test: '小儿子汪琛淮',done:true},

                ]
            },
            computed: {
                done: function () {
                    var count=0;
                    for(var i=0;i<this.todos.length;i++){
                        if(this.todos[i].done){
                            count++;
                        }
                    }
                    return count;
                }
            }
        })
    }
</script>
<style>.del{text-decoration: line-through}</style>
<body>
<div id="app-4">

    <input type="text" v-model="project" v-on:keyup.enter="addproject">
    <p><button v-on:click="addproject" >添加</button></p>

    <div  v-for="(get,index) in todos">
        <input type="checkbox" v-bind:checked="get.done" v-on:click="switchdel(index)">{{index+1}}.
        <span v-bind:class="{del: get.done}">{{get.test}}</span>
    </div>
    <todowzq :total="todos.length" :done="done"></todowzq>
</div>
</body>
</html>